<template>
	<view class="comeMaterialUnit">
		<!-- 添加至材料出库单 -->
		<navBar title="添加材料至出库单" goBackUrl="/subpackage-materials/pages/materials/materialsCome/materialsCome" @goBack="goBack"></navBar>
		
		<view class="search">
			<baseInput @inputChange="inputChange" @clearInput="clearInput"></baseInput>
		</view>
		
		<scroll-view scroll-y="true" class="scroll-box">
			<view class="content">
				<view class="nav2" @click="isShowStation = true">
					<view class="name">
						<image class="image" src="/static/image/jidi.png" mode=""></image>
						<view class="fonzt active" v-if="stationName ===''">点击选择基地</view>
						<view class="fonzt" v-else>{{ stationName }}</view>
					</view>
					<u-icon name="arrow-down" color="#A7AEBD" size="22"></u-icon>
				</view>
				
				<view class="nav2">
					<view class="name"  @click="getPopupSelect">
						<image class="image" src="/subpackage-equipment/static/materials2.png" mode=""></image>
						<view class="fonzt active"  v-if="deviceTypeName ===''">点击选择材料类别及名称</view>
						<view class="fonzt" v-else>{{ deviceTypeName }}</view>
					</view>
					<u-icon name="arrow-down" color="#A7AEBD" size="22"></u-icon>
				</view>
				
				
				<view class="info">
					<checkbox-group @change="checkboxChange">
						<label v-for="(item,index) in tableData"  :key="index" class="label">
							<view class="item" >
								<view class="header">{{item.name}}/{{item.deviceTypeName}}</view>
								<view class="item-body">
									<view class="item-nav">
										<view class="name">规格型号：</view>
										<view class="value">{{item.specificationModel}}</view>
									</view>
									<view class="item-nav">
										<view class="name">过保日期：</view>
										<view class="value">{{item.time}}</view>
									</view>
									<view class="item-nav">
										<view class="name">基地名称：</view>
										<view class="value">{{item.stationName}}</view>
									</view>
									<view class="item-nav">
										<view class="name">库存量：</view>
										<view class="value">{{item.num}}吨</view>
									</view>
									<view class="item-nav m40">
										<view class="name">出库量：</view>
										<view class="value right">
											<u-number-box class="number" :min="0" :max="item.num" v-model="item.outNum" @change="curr=>comeNumChange(curr, item,index)" color="#323233"></u-number-box>
											<text class="unit">吨</text>
										</view>
									</view>
									<checkbox :value="item.id" class="color round checkbox" />
								</view>
							</view>
						</label>
					</checkbox-group>
				</view>
			</view>
		</scroll-view>
		
		
		<view class="button">
			<view class="btn1" @click="getSelectMaterials">已选  ({{checkNum}}) </view>
			<view class="btn2" @click="submit">确定</view>
		</view>
		
		
		<!-- 选择基地 -->
		<u-picker @cancel="isShowStation = false"  @confirm="stationSelect"  keyName="name"  :show="isShowStation" :columns="stationList"></u-picker>
		<!-- <PopupSelect :isShow="isShowPopupSelect" :deviceTypeList="deviceTypeList"  @cancel="popupSelectCancel" @confrim="popupSelectConfrim"></PopupSelect> -->
		<BaseSelect
			:titleObj="titleObj"
			:isShow="isShowPopupSelect" 
			:deviceTypeList="deviceTypeList"
			@cancel="popupSelectCancel"
			@confrim="popupSelectConfrim">
		</BaseSelect>
	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar.vue"
	import { getStationList, getStorageAreaList} from "@/api/baseManage/baseManage.js"
	import { getDeviceType, getMaterialList} from "@/api/emergency/emergencyDispatch.js"
	import PopupSelect from "./popupSelect.vue"
	import baseInput from "@/components/baseInput/baseInput.vue"
	import mixins from "@/utils/mixins.js"
	import { mapMutations,mapState } from "vuex"
	import BaseSelect from "@/components/baseSelect/baseSelect.vue"
	export default {
		name: "comeMaterialUnit",
		mixins: [mixins],
		components: {
			navBar, baseInput,BaseSelect
		},
		data() {
			return {
				titleObj:{
					deviceType:"材料类型",
					deviceName:"材料名称",
					title:"材料类别及材料名称筛选"
				},
				stationList: [],        // 基地列表数据
				isShowStation: false,   
				stationName: "",   // 基地名称
				stationId:"",
				comeNum: "",       // 计数器
				isShowPopupSelect:false,
				deviceTypeList:[],
				materialType:"",
				deviceTypeName:"",
				materialTypeId:"",
				tableData:[],
				checkNum:0,
				materialIdList:[],
				comeList:[],
				materialTypeAll:[],  //全部的物料信息
				selectValue:[],
				obj: {
					stationIds: [],      // 基地id
					deviceTypeIds: [], // 筛选的设备数据
				}
			}
		},
		methods: {
			...mapMutations('materials', ["getMaterialsComeList"]),
			async onLoad(option){
				let base =await getStationList({typeIds: [102,104], name: ""})
				this.stationList =[ base.result]
				let _data ={
					name: "",
					ex1: 'material',
				}
				// 材料类型 树结构
				let res = await getDeviceType(_data)
				this.getMaterialTypeList(res.result);
				this.getList()
				
			},
			async getList(){
				// let _query=
				
				 getMaterialList(this.obj).then(res=>{
					res.result.forEach(item=>{
						item.id=item.id+""
						item.time = this.getDate(item.productionDate)
						item.outNum = 0        // 出库数量
					})
					this.tableData=res.result
				})
			},
			//不进器
			comeNumChange(curr, item,index){
				this.tableData[index].outNum=curr.value
				//获取目前添加的这个对象的id对应的下表
				let obj=this.tableData[index]
				let i=this.comeList.map(item=>item.id).indexOf(item.id)
				if(i!==-1){
					this.comeList[i]=obj
				}else{
					this.comeList.push(obj)
				}
			},
			getMaterialTypeList(val){
				//剔除最顶级
				// this.materialTypeAll=val
				// let res=val.filter(item=>item.treeLevel===2)
				// let children=val.filter(item=>item.treeLevel===3)
				// res.forEach(item=>{
				// 	if(!item.childrenList){
				// 		item.childrenList=[]
				// 	}
				// 	children.forEach(i=>{
				// 		if(item.id===i.parentId){
				// 			item.childrenList.push(i)
				// 		}
				// 	})
				// })
				
				// let list = val.map(item=>({ ...item, isChecked: false }))
				// let arr2 = list.filter(item=>item.treeLevel === 2).map(val=>({...val, childrenList:[]}))
				// let arr3 = list.filter(item=>item.treeLevel === 3)
				
				// arr2.forEach(item=>{
				// 	arr3.forEach(value=>{
				// 		if(item.id === value.parentId){
				// 			item.childrenList.push({...value, tempCode: item.id + '-' + value.id})
				// 		}
				// 	})
				// })
				
				// this.deviceTypeList=arr2
				
				let list = val.map(item=>({ ...item, isChecked: false, id: item.id + ""}))
				let arr2 = list.filter(item=>item.treeLevel === 2).map(val=>({...val, childrenList:[]}))
				let arr3 = list.filter(item=>item.treeLevel === 3)
				
				arr2.forEach(item=>{
					arr3.forEach(value=>{
						if(item.id === value.parentId+""){
							item.childrenList.push({...value, tempCode: item.id + '-' + value.id})
						}
					})
				})
				this.deviceTypeList = arr2
			},
			// u-action-sheet  的select事件
			stationSelect(data){
				this.isShowStation = false
				
				this.stationName = data.value[0].name
				this.obj.stationIds = [data.value[0].id]
				this.getList()
				console.log(this.obj.stationIds)
			},
			// checkbox 的change事件
			checkboxChange(e){				
				this.materialIdList=e.detail.value
				this.checkNum=this.materialIdList.length
			},
			
			// 跳转到已选中材料页面
			getSelectMaterials(){
				if(!this.checkNum || this.checkNum===0){
					uni.showToast({
						title:'请先选择材料',
						icon:'error'
					})
					return
				}
				//接受需要传输的值
				let res=[]
				// 查看是否包含选中的
				this.comeList.forEach(item=>{
					//选中的是否包含
					if(this.materialIdList.indexOf(item.id+"")!==-1){
						res.push(item)
					}
				})
				if(res.length===0){
					uni.showToast({
						title:'请先选择材料',
						icon:'error'
					})
					return
				}
				let _this=this
				uni.navigateTo({
					url: "/subpackage-materials/pages/materials/materialsCome/components/selectMaterial",
					success(result) {
						// setTimeout(()=>{
						// 	console.log('emit')
						// 	_this.$$emit('data-check',[1,2,3])
						// },1000)
						result.eventChannel.emit('acceptDataFromOpenerPage', res)
						// console.log('123123')
						// _this.$$emit('data-check',res)
					}
				})
			},
			
			// 返回上一级
			goBack(url){
				uni.navigateBack({
					url : url
				})
				
			},
			// 选择设备类型筛选
			getPopupSelect(){
				this.isShowPopupSelect = true
			},
			popupSelectConfrim(deviceList,selectDeviceTypeList, selectDeviceNameList){
			console.log(deviceList, selectDeviceTypeList,selectDeviceNameList)
			this.isShowPopupSelect = false
			let str = []
			this.deviceTypeList.forEach(item=>{
				selectDeviceTypeList.forEach(value=>{
					if(item.id === value){
						str.push(item.name)
					}
				})
			})
			this.deviceTypeName = str.join(",")
			this.obj.deviceTypeIds = selectDeviceNameList
				this.getList()
				
				
				
			},
			// 取消 设备筛选
			popupSelectCancel(bool){
				this.obj.deviceTypeIds = []
				this.deviceTypeName = ""
				this.isShowPopupSelect = false
				this.getList()
			},
			// input的input事件
			inputChange(e){
				console.log(e)
				if(!e){
					console.log('进入搜索')
					this.clearInput()
					return
				}
				// clearTimeout(this.time)
				// this.time = setTimeout(()=>{
					this.searchList(e)
				// }, 500)
			},
			
			// input的 清空数据事件
			clearInput(){
				this.getList()
			},
			searchList(inputValue){
				if(inputValue){
					this.tableData = this.tableData.filter(item=>{
						if(item.name.includes(inputValue) || item.name.includes(inputValue)){
							return item
						}
					})
					console.log(this.tableData,'tableData')
				}
			},
			submit(){
				if(this.checkNum===0){
					uni.showToast({
						title:'请先选择材料',
						icon:'error'
					})
					return
				}
				let res=[]
				this.materialIdList.forEach(item=>{
					this.comeList.forEach(i=>{
						if(i.id==item && i.outNum>0){
							res.push(i)
						}
					})
				})
				if(!res ||res.length==0){
					uni.showToast({
						title:'请先选择材料',
						icon:'error'
					})
					return
				}
				console.log('返回',res)
				this.getMaterialsComeList(res)
				// this.$$emit('data-submit', res)
				//emit传值使用back
				// uni.navigateBack()
				uni.redirectTo({
					url:'/subpackage-materials/pages/materials/materialsCome/materialsCome'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comeMaterialUnit{
		padding-bottom: 105rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		/* #ifdef MP-WEIXIN */
			padding-top: 180rpx;
		/* #endif */
		.search{
			padding: 0rpx 30rpx;
			padding-bottom: 24rpx;
		}
		.scroll-box{
			max-height: calc(100vh - 386rpx);
			padding-top: 10rpx;
		}
		.content{
			background-color: #F5F7FA;
			padding: 24rpx 32rpx;
		}
		.nav2{
			background-color: #FFFFFF;
			height: 106rpx;
			border-bottom: 2rpx solid #E2E5ED;
			padding: 0rpx 26rpx;
			line-height: 106rpx;
			display: flex;
			align-items: center;
			.name{
				flex: 1;
				display: flex;
				align-items: center;
				.fonzt{
					flex: 1;
					width: 248rpx;
					font-size: 32rpx;
					font-weight: bold;	
					color: #445469;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
				}
				.active{
					color: #C0C0C0;
				}
				.image{
					width: 70rpx;
					height: 70rpx;
					margin-right: 24rpx;
				}
			}
		}
		
		.info{
			margin-top: 30rpx;
			.item{
				width: 100%;
				background: #FFFFFF;
				margin-bottom: 20rpx;
				.header{
					font-size: 30rpx;
					line-height: 88rpx;
					font-weight: bold;
					color: #445469;
					height: 88rpx;
					border-bottom: 2rpx solid #E2E5ED;
					padding-left: 35rpx;
				}
				.item-body{
					position: relative;
					padding: 26rpx 35rpx;
					padding-bottom: 10rpx;
					
					.item-nav{
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 500;
						color: #445469;
						margin-bottom: 18rpx;
						.name{
							width: 160rpx;
						}
						.value{
							flex: 1;
						}
						.right{
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
						.unit{
							margin-left: 10rpx;
						}
					}
					.m40{
						justify-content: space-between;
						margin-top: 20rpx;
					}
				}
			}
			.checkbox{
				position: absolute;
				top: 25rpx;
				right: 25rpx;
			}
		}
		.button{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 105rpx;
			line-height: 105rpx;
			display: flex;
			color: #FFFFFF;
			font-size: 32rpx;
			
			font-weight: 500;
			.btn1{
				flex: 1;
				text-align: center;
				background-color: #65DDC7;
			}
			.btn2{
				flex: 1;
				text-align: center;
				background-color: #2F80ED;
			}
		}
	}
</style>
